<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('新增假期时间')"/>
        <th:block th:include="include :: datetimepicker-css"/>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-date-add">
                <div class="form-group">
                    <label class="col-sm-3 control-label">假期名称：</label>
                    <div class="col-sm-8">
                        <select name="holiday.id" id="holidayName" class="form-control" required>
                            <option value="">所有</option>
                            <option th:each="holiday : ${holidayList}" th:text="${holiday.name}" th:value="${holiday.id}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">假期时间：</label>
                    <div class="col-sm-8">
                        <input type="text" class="input-sm form-control inline" id="jiaqiriqi" placeholder=" yyyy-MM-dd " autocomplete="off" required>
                        <input type="hidden" name="beginDate" class="input-sm form-control inline" id="laydate-startTime"/>
                        <input type="hidden" name="finishDate" class="input-sm form-control inline" id="laydate-endTime"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">调休时间：</label>
                    <div class="col-sm-8" id="tiaoxiu">
                        <span class="btn btn-primary" onclick="appendTiaoXiuItem()" style="margin-top: 10px;"><i class="fa fa-plus"></i> 添加调休时间</span>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: datetimepicker-js"/>
        <script th:inline="javascript">
            var prefix = ctx + "oa/date"
            var prefix2 = ctx + "oa/workingDate"

            $("#form-date-add").validate({
                focusCleanup: true
            });

            //用于判断上一条是否填写如果没填写则不能添加下一条
            var tiaoxiuItemVar = 0;
            //记录着假期时间
            var jiaqishijian1;
            var jiaqishijian2;

            //添加调休节点
            function appendTiaoXiuItem() {
                if (jiaqishijian1 == null || jiaqishijian2 == '') {
                    $.modal.alertError("请选择假期时间后再进行添加!");
                    return;
                }
                if (tiaoxiuItemVar != 0) {
                    var txitvalue = $("#" + tiaoxiuItemVar).val();
                    if (txitvalue == null || txitvalue == '') {
                        $.modal.alertError("请完成调休时间的填写才可以继续添加!");
                        return;
                    }
                }
                //生成随机数赋值id
                var random = Math.floor(Math.random() * 9999);
                tiaoxiuItemVar = "input" + random;
                $("#tiaoxiu").prepend('' +
                    '<div class="tiaoxiu-item" id="item' + random + '" style="margin-top: 5px;">\n' +
                    '<div class="input-inline">\n' +
                    '<input type="text" class="input-sm form-control inline" id="input' + random + '" placeholder=" - " name="holidayWorkingDate" style="width: 50%;" required>\n' +
                    '<span class="btn btn-danger" onclick="removeTiaoXiuItem(' + random + ')"><i class="fa fa-remove"></i> 删除</span>\n' +
                    '</div>\n' +
                    '</div>');
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    var ins1 = laydate.render({
                        elem: '#input' + random
                    });
                });
            }

            //删除调休节点
            function removeTiaoXiuItem(id) {
                tiaoxiuItemVar = 0;
                var item = "item" + id;
                $("#" + item).empty();
            }


            //提交表单
            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/add", $('#form-date-add').serialize());
                }
            }

            /*开始时间和结束时间时间*/
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                laydate.render({
                    elem:'#jiaqiriqi'
                    , range: true
                    , done: function (value, startDate, endDate) {
                        jiaqishijian1 = startDate.year + "-" + startDate.month + "-" + startDate.date;
                        jiaqishijian2 = endDate.year + "-" + endDate.month + "-" + endDate.date;
                        $("#laydate-startTime").val(jiaqishijian1);
                        $("#laydate-endTime").val(jiaqishijian2);
                    }
                })
            });
        </script>
    </body>
</html>